<template>
  <section class="my-data">
    <div class="item flex flex-middle">
      <div class="left flex flex-middle">
        <div class="tag">*</div>
        <div class="title">头像</div>
      </div>
      <div class="right flex flex-middle flex-main-end" @click="headImgUp">
        <img :src="headImgUrl" alt />
        <van-icon class="icon" name="arrow" color="#C1C4C9" />
      </div>
    </div>

    <div class="item flex flex-middle">
      <div class="left flex flex-middle">
        <div class="tag">*</div>
        <div class="title">姓名</div>
      </div>
      <div class="right flex flex-middle flex-main-end">
        <input type="text" v-model="nickName" placeholder="请填写" placeholder-style="color:#C1C4C9" />
        <div class="icon">
          <van-icon color="#C1C4C9" />
        </div>
      </div>
    </div>
    <div class="item flex flex-middle">
      <div class="left flex flex-middle">
        <div class="tag">*</div>
        <div class="title">性别</div>
      </div>
      <div class="right flex flex-middle flex-main-end">
        <div class="value flex">
          <van-radio-group :value="sex" @change="changeSex" custom-class="flex">
            <van-radio name="1" checked-color="#3BB8FD">男</van-radio>
            <van-radio name="2" checked-color="#3BB8FD">女</van-radio>
          </van-radio-group>
        </div>
        <div class="icon">
          <van-icon color="#C1C4C9" name="arrow" />
        </div>
      </div>
    </div>
    <div class="item flex flex-middle" @click="visibleArea = !visibleArea">
      <div class="left flex flex-middle">
        <div class="tag">*</div>
        <div class="title">所在城市</div>
      </div>
      <div class="right flex flex-middle flex-main-end">
        <div class="value">{{areaVal?areaVal:'请选择'}}</div>
        <div class="icon">
          <van-icon color="#C1C4C9" name="arrow" />
        </div>
      </div>
    </div>
    <van-action-sheet :show="visibleArea" @close="visibleArea = false">
      <van-area
        :area-list="areaList"
        @cancel="visibleArea = !visibleArea"
        @confirm="changeCity"
        :value="areaId"
        :columns-num="2"
        title="选择城市"
      />
    </van-action-sheet>
    <div class="item flex flex-middle" @click="isBirthday=!isBirthday">
      <div class="left flex flex-middle">
        <div class="tag">*</div>
        <div class="title">生日</div>
      </div>
      <div class="right flex flex-middle flex-main-end">
        <div class="value">{{birthday?birthday:'请选择'}}</div>
        <div class="icon">
          <van-icon color="#C1C4C9" name="arrow" />
        </div>
      </div>
    </div>
    <van-action-sheet :show="isBirthday" @close="isBirthday = false">
      <van-datetime-picker
        type="date"
        :value="birth || currentDate"
        @cancel="isBirthday=!isBirthday"
        @confirm="onBirthday"
      />
    </van-action-sheet>
    <div class="item flex flex-middle">
      <div class="left flex flex-middle">
        <div class="tag"></div>
        <div class="title">身高</div>
      </div>
      <div class="right flex flex-middle flex-main-end">
        <input type="number" maxlength="3" v-model="height" placeholder="请填写" placeholder-style="color:#C1C4C9" />
        <div class="icon">CM</div>
      </div>
    </div>
    <div class="item flex flex-middle">
      <div class="left flex flex-middle">
        <div class="tag">*</div>
        <div class="title">教育状态</div>
      </div>
      <div class="right flex flex-middle flex-main-end">
        <div class="value flex">
          <van-radio-group :value="educationStatus" @change="changeEdu" custom-class="flex">
            <van-radio name="1" checked-color="#3BB8FD">毕业</van-radio>
            <van-radio name="2" checked-color="#3BB8FD">在读</van-radio>
          </van-radio-group>
        </div>
        <div class="icon">
          <van-icon color="#C1C4C9" name="arrow" />
        </div>
      </div>
    </div>
    <div class="item flex flex-middle" @click="isEdu=!isEdu">
      <div class="left flex flex-middle">
        <div class="tag">*</div>
        <div class="title">最高学历</div>
      </div>
      <div class="right flex flex-middle flex-main-end">
        <div class="value" v-if="education == 1">小学</div>
        <div class="value" v-else-if="education == 2">初中</div>
        <div class="value" v-else-if="education == 3">高中</div>
        <div class="value" v-else-if="education == 4">大学</div>
        <div class="value" v-else>请选择</div>
        <div class="icon">
          <van-icon color="#C1C4C9" name="arrow" />
        </div>
      </div>
    </div>
    <van-action-sheet :show="isEdu"  @close="isEdu = false">
      <van-picker show-toolbar :columns="educationsList" @confirm="onEdu" @cancel="isEdu=!isEdu" />
    </van-action-sheet>
    <div class="item flex flex-middle mt10">
      <div class="left flex flex-middle">
        <div class="tag">*</div>
        <div class="title">手机号</div>
      </div>
      <div class="right flex flex-middle flex-main-end">
        <input type="number" maxlength="11" v-model="phone" placeholder="请输入" placeholder-style="color:#C1C4C9" />
        <div class="icon">
          <van-icon color="#C1C4C9" />
        </div>
      </div>
    </div>
    <div class="item flex flex-middle">
      <div class="left flex flex-middle">
        <div class="tag"></div>
        <div class="title">邮箱</div>
      </div>
      <div class="right flex flex-middle flex-main-end">
        <input type="text" v-model="email" placeholder="请输入" placeholder-style="color:#C1C4C9" />
        <div class="icon">
          <van-icon color="#C1C4C9" />
        </div>
      </div>
    </div>
    <div class="item flex flex-middle">
      <div class="left flex flex-middle">
        <div class="tag"></div>
        <div class="title">QQ</div>
      </div>
      <div class="right flex flex-middle flex-main-end">
        <input type="number" maxlength="10" v-model="qq" placeholder="请输入" placeholder-style="color:#C1C4C9" />
        <div class="icon">
          <van-icon color="#C1C4C9" />
        </div>
      </div>
    </div>
    <div class="item flex flex-middle">
      <div class="left flex flex-middle">
        <div class="tag"></div>
        <div class="title">微信</div>
      </div>
      <div class="right flex flex-middle flex-main-end">
        <input type="text" v-model="wechat" placeholder="请输入" placeholder-style="color:#C1C4C9" @input="onInput" style="ime-mode:disabled"/>
        <div class="icon">
          <van-icon color="#C1C4C9" />
        </div>
      </div>
    </div>
    <div class="bottom">
      <button @click="updateMemberInfo">保存</button>
      <div>
        需填写打
        <span>*</span>号的内容才可以保存该模块
      </div>
    </div>
  </section>
</template>
<script>
import areaList from "../../../common/js/city.js";
export default {
  data() {
    return {
      areaList,
      visibleArea: false,
      areaVal: "",
      edu: "", //学历
      isEdu: false,
      educationsList: "",
      isBirthday: false,
      birthday: "",
      currentDate: new Date().getTime(),
      nickName: "",
      headImgUrl: "",
      sex: "1",
      areaId: "",
      birth: "",
      height: "",
      educationStatus: "1",
      education: "",
      phone: "",
      email: "",
      qq: "",
      wechat: ""
    };
  },
  onLoad() {
    Object.assign(this.$data, this.$options.data());
    this.getMemberDtl();
    let educations = wx.getStorageSync("dictList").educations;
    this.educationsList = educations.map(item => {
      item.text = item.name;
      return item;
    });
  },
  methods: {
    onInput(e){
      let val = e.target.value
      val = val.replace(/[\u4E00-\u9FA5]/g,'')
      this.wechat = val;
    },
    getMemberDtl() {
      this.$api.getMemberDtl().then(res => {
        this.headImgUrl = res.data.memberIndo.headImgUrl;
        this.nickName = res.data.memberIndo.nickName;
        this.sex = res.data.memberIndo.sex + "";
        this.areaVal = res.data.memberIndo.address;
        this.areaId = res.data.memberIndo.areaId;
        this.height = res.data.memberIndo.height;
        this.phone = res.data.memberIndo.resumePhone;
        this.qq = res.data.memberIndo.qq;
        this.educationStatus = res.data.memberIndo.educationStatus + "";
        switch (res.data.memberIndo.education) {
          case "小学":
            this.education = "1";
            break;
          case "初中":
            this.education = "2";
            break;
          case "高中":
            this.education = "3";
            break;
          case "大学":
            this.education = "4";
            break;
        }
        this.wechat = res.data.memberIndo.wechat;
        this.birthday = res.data.memberIndo.birth;
        this.birth = +new Date(res.data.memberIndo.birth);
        this.email = res.data.memberIndo.email;
      });
    },
    routerTo(url) {
      wx.navigateTo({ url });
    },
    changeCity(e) {
      this.areaVal = e.target.values[0].name + e.target.values[1].name;
      this.areaId = e.target.values[1].code;
      this.visibleArea = !this.visibleArea;
    },
    changeSex(e) {
      this.sex = e.mp.detail;
    },
    //教育状态
    changeEdu(e) {
      this.educationStatus = e.mp.detail;
    },
    onBirthday(e) {
      this.birth = e.mp.detail;
      this.birthday = this.formatDate(e.mp.detail);
      this.isBirthday = !this.isBirthday;
    },
    //最高学历
    onEdu(e) {
      this.isEdu = !this.isEdu;
      this.education = e.mp.detail.value.value;
    },
    headImgUp() {
      var _this = this;
      wx.showLoading({
          title: '加载中',
      });
      wx.chooseImage({
        count: 1,
        success(res) {
          let path = res.tempFilePaths[0];
          let FSM = wx.getFileSystemManager();
          let base64Str = FSM.readFileSync(path, "base64");
          let imgType = res.tempFilePaths[0].substring(
            res.tempFilePaths[0].lastIndexOf(".")
          );
          _this.uploadImg(base64Str, imgType).then(res => {
            _this.headImgUrl = res.data.imgUrl;
          });
        },
        complete() {
            wx.hideLoading();
        }
      });
    },
    //图片上传公共接口
    uploadImg(base64Str, imgType) {
      return new Promise((resolve, reject) => {
        this.$api.uploadImg({ base64Str, imgType }).then(res => {
          resolve(res);
        });
      });
    },
    //获取个人简历
    getResumeList() {
      this.$api.getResumeList().then(res => {
        this.headImgUrl = res.data.memberMap.headImgUrl;
        this.nickName = res.data.memberMap.nickName;
        this.sex = res.data.memberMap.sex + "";
        this.areaId = res.data.memberMap.areaId;
        this.nickName = res.data.memberMap.nickName;
      });
    },
    //编辑个人简历
    updateMemberInfo() {
      // 1  nickName	姓名（昵称）	是	[string]
      // 3	headImgUrl	头像	是	[string]
      // 4	sex	1: 男 2: 女	是	[string]
      // 5	areaId	所在城市	是	[string]
      // 6	birth	出生日期	是	[string]
      // 7	height	身高	是	[string]
      // 8	educationStatus	教育状态 1:毕业2:在读	是	[string]
      // 9	education	学历(数据字典)	是	[string]
      // 10	phone	手机号码	是	[string]
      // 11	email	邮箱		[string]
      // 12	qq	qq		[string]
      // 13	wechat	微信
      if(!(/^1[3456789]\d{9}$/.test(this.phone))){
        wx.showToast({
          title: '手机号码格式错误', //提示的内容,
          icon: 'none', //图标,
          duration: 2000, //延迟时间,
        });
        return;
      }
      if(this.email && !(/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(this.email))){
        wx.showToast({
          title: '邮箱格式错误', //提示的内容,
          icon: 'none', //图标,
          duration: 2000, //延迟时间,
        });
        return;
      }
      if (!Number(this.sex)) {
        wx.showToast({
          title: '请选择性别', //提示的内容,
          icon: 'none', //图标,
          duration: 2000, //延迟时间,
        });
        return;
      }
      if (!this.nickName) {
        wx.showToast({
          title: '请输入昵称', //提示的内容,
          icon: 'none', //图标,
          duration: 2000, //延迟时间,
        });
        return;
      }
      if (!this.areaId) {
        wx.showToast({
          title: '请选择城市', //提示的内容,
          icon: 'none', //图标,
          duration: 2000, //延迟时间,
        });
        return;
      }
      if (!this.birth) {
        wx.showToast({
          title: '请选择生日', //提示的内容,
          icon: 'none', //图标,
          duration: 2000, //延迟时间,
        });
        return;
      }
      if (!this.education) {
        wx.showToast({
          title: '请选择学历', //提示的内容,
          icon: 'none', //图标,
          duration: 2000, //延迟时间,
        });
        return;
      }
      if (!this.educationStatus) {
        wx.showToast({
          title: '请选择教育状态', //提示的内容,
          icon: 'none', //图标,
          duration: 2000, //延迟时间,
        });
        return;
      }
      if (this.height && !(Number(this.height) > 0)) {
        wx.showToast({
          title: '请输入身高', //提示的内容,
          icon: 'none', //图标,
          duration: 2000, //延迟时间,
        });
        return;
      }
      let params = {
        nickName: this.nickName,
        headImgUrl: this.headImgUrl,
        sex: this.sex,
        areaId: this.areaId,
        birth: this.birth,
        height: this.height,
        educationStatus: this.educationStatus,
        education: this.education,
        phone: this.phone,
        email: this.email,
        qq: this.qq,
        wechat: this.wechat
      };
      this.$api.updateMemberInfo(params).then(res => {
        if (res.code == 0) {
          wx.showToast({
            title: res.msg, //提示的内容,
            icon: "none", //图标,
            duration: 1500, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => {
              setTimeout(() => {
                wx.navigateBack({
                  delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
                });
              }, 1500);
            }
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.my-data {
  padding-bottom: 70px;
  .item {
    padding: 15px;
    background: white;
    &:not(:last-child) {
      border-bottom: 1px solid #f7f7f7;
    }

    .left {
      flex: 1;
      .tag {
        font-size: 12px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(59, 184, 253, 1);
        line-height: 14px;
        margin-right: 6px;
        width: 4px;
      }
      .title {
        font-size: 12px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(64, 68, 76, 1);
      }
    }
    .right {
      flex: 1;
      input,
      .value {
        font-size: 12px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(193, 196, 201, 1);
        text-align: right;
      }
      img {
        width: 40px;
        height: 40px;
        border-radius: 100%;
        float: right;
      }
      .icon {
        margin-left: 18px;
        width: 14px;
      }
    }
  }
  .bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 99;
    background: white;
    button {
      width: 345px;
      height: 44px;
      line-height: 44px;
      background: rgba(59, 184, 253, 1);
      border-radius: 5px;
      font-size: 15px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      padding: 0;
      margin: 0 15px;
    }
    div {
      margin: 10px 15px 10px;
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(193, 196, 201, 1);
    }
    span {
      color: #3bb8fd;
    }
  }
}
</style>
<style lang="scss">
page {
  background: #f7f7f7;
}
._van-radio-group {
  display: flex;
  ._van-radio:nth-of-type(1) {
    margin-right: 15px;
  }
}
.my-data {
  .van-radio__icon {
    width: 23px;
    height: 23px;
  }
  .van-radio__icon-wrap {
    line-height: 23px;
  }
}
</style>